<template>
    <div class="Zky_Popup" @dblclick.self="DBclickActive" v-if="PopupFlag">
        <div class="Zky_PopupBox">
            <div class="Zky_PopupBoxHeader">
                {{ title }}
            </div>
            <div class="Zky_PopupBoxContent">
                <slot></slot>
            </div>
            <div class="Zky_PopupBoxFooter">
                <button @click="Confirm">确认</button>
                <button data-error @click="Cancel"> 取消</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
const prop = defineProps(["hidden", "title", "Confirm", "Cancel"])
const emit = defineEmits(["update:hidden"])
const title = ref("弹窗样式")
const PopupFlag = ref(false)

watch([() => prop.hidden, () => prop.title], () => {
    init()
})

const DBclickActive = () => {
    PopupFlag.value = !PopupFlag.value
    emit("update:hidden", PopupFlag.value)
}

// 确认按钮
const Confirm = () => {
    if (prop.Confirm) {
        prop.Confirm()
    } else {
        PopupFlag.value = !PopupFlag.value
        // defineModel 
        emit("update:hidden", PopupFlag.value)
    }

}

// 取消按钮
const Cancel = () => {
    if (prop.Cancel) {
        prop.Cancel()
    } else {
        PopupFlag.value = !PopupFlag.value
        // defineModel 
        emit("update:hidden", PopupFlag.value)
    }
}

const init = () => {
    PopupFlag.value = prop.hidden
    // if (prop.hidden) {

    // }
    if (prop.title) {
        title.value = prop.title
    }
}
init()
</script>

<style scoped lang="scss">
.Zky_Popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;

    .Zky_PopupBox {
        width: 80vw;
        /*height: 80vh;*/
        background: #fff;
        margin: 10vh auto;

        .Zky_PopupBoxHeader {
            height: 6vh;
            border-bottom: 1px solid #aaa;
            line-height: 6vh;
            text-align: center;
            font-size: 1.4rem
        }

        .Zky_PopupBoxContent {
            padding: 10px;
            min-height: auto;
        }

        .Zky_PopupBoxFooter {
            height: 7vh;
            border-top: 1px solid #aaa;
            position: relative;
            width: 100%;
            bottom: 0;
            text-align: center;


            button {
                padding: 0;
                height: 4vh;
                width: 10vw;
                margin: 1.5vh 20px 0 0;


            }
        }
    }
}
</style>